<template>
  <div class="fundodoo-features-condition">
    <div class="fundodoo-form">
      <div title="状态" class="fundodoo-form-item">
        <el-select v-model="condition.status" size="small" placeholder="状态选择" @change="statusChange">
          <el-option
            v-for="item in allStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div title="分类" class="fundodoo-form-item">
        <el-select v-model="condition.classification" :clearable="true" size="small" placeholder="分类选择" @change="classificationChange">
          <el-option
            v-for="item in allClassification"
            :key="item.id"
            :label="'|---'.repeat(item.level) + item.label"
            :value="item.id"
          />
        </el-select>
      </div>
      <div title="名称" class="fundodoo-form-item">
        <el-input
          v-model="condition.goodsName"
          suffix-icon="el-icon-search"
          maxlength="18"
          show-word-limit
          size="small"
          placeholder="请输入名称"
          @input.native="goodsNameChange"
        />
      </div>

    </div>
    <div class="fundodoo-params-action">
      <el-button size="small" type="warning" plain @click="resetCondition">重置</el-button>
    </div>
  </div>
</template>

<script>
import { goodsCategoryTree } from '@/api/goodsCategory'

export default {
  name: 'GoodsCondition',
  components: {

  },
  props: {
    conditionState: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      timeout: null,
      condition: {
        status: 1,
        classification: -1,
        goodsName: ''
      },
      allStatus: [{
        value: 1,
        label: '出售中',
        num: 10
      }, {
        value: 2,
        label: '待上架',
        num: 168
      }, {
        value: 3,
        label: '已售罄',
        num: 20
      }, {
        value: 4,
        label: '库存警戒',
        num: 90
      }, {
        value: 5,
        label: '回收站',
        num: 100
      }],
      allClassification: []
    }
  },
  watch: {
    conditionState(v) {
      this.$nextTick(function() {
        this.condition.status = v.status
        this.condition.classification = v.classification
        this.condition.goodsName = v.goodsName
      })
    }
  },
  created() {

  },
  beforeMount() {

  },
  mounted() {
    this.$nextTick(function() {
      this.fetchAllClassification()
      this.fetchData(true, true)
    })
  },
  methods: {
    fetchAllClassification() {
      goodsCategoryTree().then(res => {
        const tmpAll = []
        const len = res.data.length
        if (len > 0) {
          const emptyOption = {}
          emptyOption.id = -1
          emptyOption.label = '全部'
          emptyOption.level = 0
          tmpAll.push(emptyOption)
        }
        for (let i = 0; i < len; i++) {
          const tmp = res.data[i]
          tmp.level = 1
          tmpAll.push(tmp)
          for (let j = 0, cLen = tmp.children.length; j < cLen; j++) {
            const ctmp = tmp.children[j]
            ctmp.level = 2
            tmpAll.push(ctmp)
          }
        }
        this.allClassification.length = 0
        this.allClassification = tmpAll
      })
    },
    statusChange() {
      this.fetchData(true)
    },
    classificationChange() {
      this.fetchData(true)
    },
    goodsNameChange() {
      this.fetchData(true)
    },
    resetCondition() {
      this.condition.status = 1
      this.condition.classification = -1
      this.condition.goodsName = ''
      this.fetchData(true)
    },
    fetchData(pushState, replaceState) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        const playload = this.condition
        playload.pushState = pushState
        playload.replaceState = replaceState
        this.$emit('fetchGoodsConditionChange', playload)
      }, 518)
    }
  }
}

</script>
